<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bg{
				background-color: #F2F2F2;
				width: 1320px;
				height: 1050px;
				float: right;
				
			}
			.bg .top .left h5{
				line-height: 210px;
				text-align: center; 
			}
			.bg .top .right .left2 button{
				display: block;
				width: 100px;
				height: 25px;
				margin-top: 15px;
				margin-left: 10px;
				border-radius: 5px;
				border: none;
			}
			.bg .top .right .right2 table{
				width: 1020px;
				height: 250px;
				float: right;
			}
			.bg .bottom .left1 .left3{
				width: 460px;
				height: 760px;
				display: flex;
			}
			.bg .bottom .left1 .left3 .right4 {
				display: block;
			}
			.bg .bottom .left1 .left3 .right4 .top1 input{
			  margin:10px;
				width: 355px;
				height: 30px;
				border-radius: 4px;
			}
			.bg .bottom .left1 .left3 .left4 span{
				width: 80px;
				height: 127px;
				background-color: #F2F2F2;
				display: block;
				line-height: 127px;
				text-align: center;
				font-size: 3px;
			}
			.bg .bottom .left1 .left3 .left4 span:hover{
				background-color: #409EFF;
			}
			.bg .bottom .left1{
				/* background-color: #ff0; */
				width:470px;
				height:760px;
				padding-left: 10px;
				padding-top: 10px;
				box-shadow: 10px 10px 10px rgb(240,240,240)
			}
			.bg .bottom .left1{
				display: flex;
			} 
			.top .left{
				position: absolute;
				width: 100px;
				height: 250px;
				background-color: #FFFFFF;
				margin: 10px;
			}
			.top .right{
				position: relative;
				width: 1190px;
				height: 250px;
				/* background-color: #ff0; */
				background-color: #FFFFFF; 
			  float: right;
				margin: 10px;
				display: flex;
			}
			.top .right .right2 table tr td{
				border-radius:10px;
				width: 72px;
				height: 20px;
				display:inline-block;
				margin-top: 12px;
			  margin-left: 3px;
				font-size: 3px;
				line-height: 20px;
				text-align: center;
			}
			.top .right .right2 table tr td:hover{
				background-color: #409EFF;
			}
			.bottom{
				width: 1380px;
				height: 795px;
				background-color: #FFFFFF;
				margin-top:  270px;
				margin-left: 10px;
			}
			.bg .bottom .left1 .right3{
				padding-left: 50px;
			}
		</style>
	</head>
	<body >
		<div class="bg">
		<div class="top">
			<div class="left">
				<h5>文件类型</h5>
			</div>
			<div class="right">
				<div class="left2">
									<button>项目附件:</button>
									<button>采购附件:</button>
									<button>合同附件:</button>
									<button>审计附件:</button>
									<button>付款附件:</button>
									<button>验收附件:</button>
								</div>
								<div class="right2">
								<table>
									<tr>
										<td>项目建议书</td>
										<td>可行性报告</td>
										<td>项目概算依据</td>
										<td>会议纪要</td>
										<td>土地证复印件</td>
										<td>用地规划许可</td>
										<td>工程规划许可</td>
										<td>设计图纸审图</td>
										<td>质监安装</td>
										<td>消防人防</td>
										<td>施工许可证</td>
										<td>环评依据</td>
										<td>其他</td>
									</tr>
									<tr>
										<td>中标通知书</td>
										<td>招标文件</td>
										<td>招标公告</td>
										<td>招标内容清单</td>
										<td>其他</td>
										<!-- <td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td> -->
									</tr>
									<tr>
										<td>合同文件</td>
										<td>审计变跟单</td>
										<td>工程变跟单</td>
										<td>设计变更单</td>
										<td>签证审批单</td>
										<td>法律意见</td>
										<td>合同监理附件</td>
										<td>其他</td>
										<!-- <td></td>
										<td></td>
										<td></td>
										<td></td> -->
									</tr>
									<tr>
										<td>审计报告</td>
										<td>审计结论</td>
										<td>其他</td>
										<!-- <td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td> -->
									</tr>
									<tr>
										<td>付款申请单</td>
										<td>付款发票</td>
										<td>付款收据</td>
										<td>其他</td>
										<!-- <td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td> -->
									</tr>
									<tr>
										<td>验收报告</td>
										<td>其他</td>
										<!-- <td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td> -->
									</tr>
								</table>
								
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="left1">
				<div class="left3">
						<div class="left4">
							<span>全部</span>
							<span>未开工</span>
							<span>施工中</span>
							<span>竣工</span>
							<span>停工</span>
							<span>其他</span>
						</div>
						<div class="right4">
							<div class="top1">
								<input type="text" placeholder="请输入项目名称">
							</div>
							<div class="bottom1">
								<iframe scrolling="no" frameborder="0" width="380px"
								height="700px"	src="./wenjianguanli_01.html"></iframe>
							</div>
						</div>
					</div>
				<div class="right3">
					<iframe scrolling="no" frameborder="0" width="700px"
					height="200px" 	src="./wenjianguanli_02.html"></iframe>
			</div>
			</div>
			<div class="right1">
		
			</div>
		</div>
		</div>
	</body>
</html>